import _ from 'lodash'
import { Button, Input, Select, Space } from 'antd'

import { getLogisticsStatusName, getRouteNodeName } from '../utils'
import { defaultParams, useBoundStore } from './store'

export const Filter = () => {
  const reqData = useBoundStore(v => v.reqData)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  return (
    <Space wrap>
      <Space size={4}>
        物流状态
        <Select
          style={{ width: 150 }}
          placeholder="请选择物流状态"
          options={getLogisticsStatusName.valueList2.map(v => ({
            label: getLogisticsStatusName(v),
            value: v,
          }))}
          allowClear
          value={reqData.logisticsStatus}
          onChange={v => setReqData({ logisticsStatus: v ?? undefined })}
        />
      </Space>
      <Space size={4}>
        节点
        <Select
          style={{ width: 150 }}
          placeholder="请选择路由节点"
          options={getRouteNodeName.valueList.map(d => ({ label: getRouteNodeName(d), value: d }))}
          allowClear
          value={reqData.routeNode}
          onChange={v => setReqData({ routeNode: v ?? undefined })}
        />
      </Space>
      <Space>
        <Space size={4}>
          中文模板
          <Input
            style={{ width: 250 }}
            placeholder="请输入中文模板"
            allowClear
            value={reqData.templateCn}
            onChange={e => setReqData({ templateCn: e.target.value || undefined })}
            onPressEnter={handleQuery}
          />
        </Space>
        <Space>
          <Space size={4}>
            <Button
              onClick={() => {
                setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
                getData(true)
              }}
            >
              重置
            </Button>
            <Button type="primary" onClick={handleQuery}>
              查询
            </Button>
          </Space>
        </Space>
      </Space>
    </Space>
  )
}
